<template> 
  <h1>个人信息</h1>
  <h2>姓名: {{person.name}}</h2>
  <h2>年龄: {{person.age}}</h2>
  <button @click="test">点我触发 Hello 事件</button> 
</template>

<script>  
import {reactive} from 'vue'
export default {
  name: 'Demo', 
  props:['msg', 'school'], 
  emits: ['hello'], 
//   beforeCreate(){
//     console.log('---- beforeCreate ----')
//   },
  setup(props, context) {
    // console.log('---- setup ----')
    // console.log(props, context)
    // console.log(context.attrs) // 详单见 Vue2 中的 $attrs
    // console.log(context.emit) // 触发自定义事件
    console.log(context.slots) // 触发自定义事件
    let person = reactive({
      name: '张三',
      age: 18, 
    })  
    function test(){
      context.emit('hello', '凌宸')
    }
    // 返回一个对象 (常用)
    return {
      person, test
    } 
  }
}
</script>

